<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <p>这是从子组件接收到的数据：{{data}}</p>
        <hello abc="hahaha" @myget="get"></hello>
    </div>
</body>
<script src="../libs/vue3.js"></script>

<script>
    // 创建全局组件，使用Vue的哪个方法
    // Vue.component()

    const { createApp, ref } = Vue;
    // 根组件
    const app = createApp({
        setup() {
            const title = ref("这是根组件");
            const data = ref(null);
            const get = (d)=>{
                data.value = d;
            }
            return { title, get, data };
        }
    });
    // 全局组件
    app.component("hello",{
        template: `<div>
                        <p>{{title}}</p>
                        <p>从父组件传过来的值：{{abc}}</p>
                        <button @click="send">给父组件发送数据</button>
                    </div>`,
        props:["abc"],
        setup(props, {emit}){
            const title = ref("这是一个全局组件");
            const data = ref("这是子给父的数据");

            const send = ()=>{
                emit("myget", data.value);
            }
            // 父传子的数据
            console.log(props);

            // console.log(context)

            return {title, send};
        }
    })

    app.mount("#app");

</script>
</html>